<template>
  <div class="container">
    <el-dialog title="录入" :visible.sync="addModelShow" width="750px" :before-close="handleClose">
      <div class="container_examine">
        <!--<p>预约信息</p>-->
        <div class="examine">
          <el-form ref="formInline" :rules="rules" :inline="true" :model="formInline" label-width="155px">
            <el-form-item label="姓名:" prop="name" style="width: 58%">
              <el-input v-model="formInline.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="所属乡镇:" prop="township">
              <el-select v-model="formInline.township" >
                <el-option v-for="(item,index) in townshipList" :key="index" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址:" prop="address" style="width: 98%">
              <el-input v-model="formInline.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="办事人联系电话:" prop="phone">
              <el-input v-model="formInline.phone" placeholder="请输入办事人联系电话" />
            </el-form-item>
            <el-form-item label="办事人身份证号:" prop="cardId">
              <el-input v-model="formInline.cardId" placeholder="请输入办事人身份证号" />
            </el-form-item>
            <el-form-item label="上门服务事项:" prop="event">
              <el-select v-model="formInline.event" placeholder="请选择上门服务事项">
                <el-option v-for="item in matterList" :key="item.id" :label="item.item_name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="预约人与办事人关系:" >
              <el-input v-model="formInline.relationship" placeholder="请输入预约人与办事人关系" />
            </el-form-item>
            <el-form-item label="预约上门时间:" prop="time" style="width: 100%">
              <el-date-picker
                v-model="formInline.time"
                :picker-options="pickerOptions1"
                type="date"
                placeholder="选择日期"
              />
              -
              <el-select v-model="formInline.startTime" placeholder="请选择上门时间段" style="width: 50%">
                <el-option
                  v-for="(item,index) in timeRange"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="其他需求" style="width: 97%">
              <el-input v-model="formInline.other" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" size="small" @click="cancelBtn('formInline')">取消</el-button>
        <el-button size="small" type="primary" @click="saveBtn('formInline')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { dateFormat } from '../utils'
  import { getMatterDataList, addAppointment } from '../api'
  export default {
    props:['addModelShow'],
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        formInline: {
          name: '',
          township:'',
          address: '',
          phone: '',
          cardId: '',
          event: '',
          relationship: '',
          time: '',
          other: '',
          start_time: '',
          startTime: '',
          endTime: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          township:[
            { required: true, message: '请选择所属乡镇', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入办事人联系电话', trigger: 'blur' }
          ],
          cardId: [
            { required: true, message: '请输入办事人身份证号', trigger: 'blur' }
          ],
          event: [
            { required: true, message: '请选择上门服务事项', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '请选择上门时间', trigger: 'change' }
          ],
          other: [
            { required: true, message: '请输入审核意见', trigger: 'blur' }
          ]
        },
        timeRange: [
          "08:30~11:30",
          "13:30~16:30",
        ],
        matterList: [],
        userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
        townshipList:[
          {name:'嘉善县罗星街道'},
          {name:'嘉善县陶庄镇'},
          {name:'嘉善县魏塘街道'},
          {name:'嘉善县天凝镇'},
          {name:'嘉善县开发区（嘉善县惠民街道）'},
          {name:'嘉善县西塘镇'},
          {name:'嘉善县姚庄镇'},
          {name:'嘉善县干窑镇'},
          {name:'嘉善县大云镇'},
        ]

      }
    },
    watch: {
      'formInline.time': function(newVal) {

        this.formInline.start_time = this.formatTime(newVal);
        console.log(this.formInline.start_time)
      }
    },
    created() {
      this.getMatterList()
    },
    methods: {
      // 时间格式化
      formatTime(time) {
        if (time) {
          return dateFormat(new Date(time), 'yyyy-MM-dd')
        } else {
          return ''
        }
      },
      // 获取事项
      getMatterList() {
        getMatterDataList().then(res => {
          this.matterList = res.data.data
        })
      },
      saveBtn(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.formInline.startTime) {
              this.$message.warning('请选择上门时间段')
              return
            }
            const data = {
              name: this.formInline.name,
              township:this.formInline.township,
              address: this.formInline.address,
              tel: this.formInline.phone,
              card_id: this.formInline.cardId,
              service_items_id: this.formInline.event,
              relationship: this.formInline.relationship,
              time: this.formInline.start_time + ' ' + this.formInline.startTime,
              demand: this.formInline.other,
              ryid: this.userInfo.id,
              type: '电话录入',
              sender_uer: this.userInfo.nickName,
              account: this.userInfo.username
            }
            console.log(data);
            // return;
            addAppointment(data).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '录入成功'
                })
                this.$refs[formName].resetFields()
                this.formInline.other = ''
                this.formInline.startTime = ''
                this.formInline.endTime = ''
                this.$emit('addFun', true)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelBtn(formName) {
        this.$refs[formName].resetFields()
        this.$emit('addFun', false)
      },
      handleClose(){
        this.$emit('addFun', false)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 82vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
      padding:30px 20px 30px 30px;
    }
    ::v-deep .el-dialog__header {
      /*background: #3489ff;*/
      position: fixed;
      width: 750px;
      z-index: 99;
      /*.el-dialog__title {*/
      /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
        /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 15px;
      p{
        font-size: 15px;
        color: #3D4D60;
        font-weight: bold;
      }
      .el-form--inline .el-form-item{
        width: 48%;
        /*margin-bottom:12px;*/
      }
      ::v-deep .el-form-item__content{
        width: calc(100% - 155px);
      }
      ::v-deep .el-textarea__inner,
      ::v-deep .el-select{
        width: 100%;
      }
      /*::v-deep .el-date-editor{*/
      /*width: 50%;*/
      /*}*/
      /*::v-deep .el-form-item__label{*/
      /*font-weight: normal;*/
      /*line-height:20px;*/
      /*}*/
    }
  }

</style>
